<div class="page-wrapper d-flex flex-column pt-4 w-100">
    <div class="container-xl">
        <div class="page-header d-print-none">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        Creating
                    </div>
                    <h3 class="page-title">
                        New Language & Culture
                    </h3>
                </div>
            </div>
        </div>
    </div>
    <div class="page-body d-flex flex-row-reverse">

        <aside class="bd-sidebar sub-sidebar">
            <nav class="bd-links p-3" aria-label="Sub-section navigation">

                <div class="card">
                    <actions back-url="'/portal/language/list'"></actions>
                    <div class="card-body">
                        <!-- <label class="form-label">Icon</label> -->
                        <a class="nav-link p-2 text-center" href="#" data-bs-toggle="dropdown" aria-haspopup="true"
                            aria-expanded="false">
                            <span class="flag-icon {{viewmodel.icon}} flag-icon-squared" style="width: 100%; line-height: 300px"></span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-left" aria-labelledby="sw-versions">
                            <a class="dropdown-item" ng-repeat="item in icons"
                                ng-class="{active: viewmodel.icon === item}" href="#" ng-click="changeIcon(item);">
                                <span class="flag-icon {{item}}"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </nav>
        </aside>

        <!-- ----------------------------------------------------------- -->

        <div class="content-body py-3 pe-3">
            <div class="card">
                <div class="card-body">
                    <!-- Main content -->
                    <section class="" ng-init="getSingle()">
                        <form ng-class="{'submitted': submitted}" ng-submit="save()" ng-if="viewmodel">
                            <div class="mb-3">
                                <select class="form-select form-select-lg"
                                    ng-options="item as item.fullName for item in cultures track by item.specificulture"
                                    ng-model="selected" ng-change="changeData(selected)"></select>
                            </div>
                            <div class="mb-3">
                                <input type="text" ng-model="viewmodel.alias" class="form-control"
                                    placeholder="Enter your culture alias here..." />
                            </div>
                            <div class="mb-3">
                                <input type="text" ng-model="viewmodel.fullName" class="form-control"
                                    placeholder="Enter your culture name here..." />
                            </div>
                            <div class="mb-3">
                                <input type="text" ng-model="viewmodel.specificulture" class="form-control"
                                    placeholder="Enter your culture specificulture here..." />
                            </div>
                            <div class="mb-3">
                                <input type="text" ng-model="viewmodel.lcid" class="form-control"
                                    placeholder="Enter your culture lcid here..." />
                            </div>
                            <div class="mb-3">
                                <textarea type="text" ng-model="viewmodel.description" class="form-control"
                                    placeholder="Description" rows="5"></textarea>
                            </div>
                        </form>
                    </section>
                    <!-- /.content -->
                </div>
            </div>
        </div>

    </div>
</div>